import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:stage_app/constants/color_constant.dart';
import 'package:stage_app/pages/home/home_page.dart';
import 'package:stage_app/pages/order/order_page.dart';
import 'package:stage_app/pages/user/user_center_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = ColorConstant.gray_cc;
  final _defaultActiveColor = ColorConstant.app_main;
  final _showLabel = false;
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // 设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.init(context, width: 375, height: 863);
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[HomePage(), OrderPage(), UserCenterPage()],
      ),
      bottomNavigationBar: Theme( // 定制样式，去掉点击水波纹
        data: ThemeData(
          brightness: Brightness.light,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: _showLabel ? labelTabs() : tabs(),
      ),
    );
  }

  BottomNavigationBar labelTabs() {
    return BottomNavigationBar(
      currentIndex: _currentIndex,
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home, color: _defaultColor),
            activeIcon: Icon(Icons.home, color: _defaultActiveColor),
            title: Text(
              '首页',
              style: TextStyle(
                  color:
                      _currentIndex != 0 ? _defaultColor : _defaultActiveColor),
            )),
        BottomNavigationBarItem(
            icon: Icon(Icons.account_circle, color: _defaultColor),
            activeIcon: Icon(Icons.account_circle, color: _defaultActiveColor),
            title: Text(
              '我的',
              style: TextStyle(
                  color:
                      _currentIndex != 1 ? _defaultColor : _defaultActiveColor),
            )),
      ],
    );
  }

  BottomAppBar tabs() {
    return BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new Container(
              child: IconButton(
                icon: Icon(Icons.home),
                color: _currentIndex != 0 ? _defaultColor : _defaultActiveColor,
                onPressed: () {
                  setState(() {
                    _currentIndex = 0;
                  });
                },
              ),
            ),
            IconButton(
              icon: Icon(Icons.border_color),
              color: _currentIndex != 1 ? _defaultColor : _defaultActiveColor,
              onPressed: () {
                setState(() {
                  _currentIndex = 1;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.account_circle),
              color: _currentIndex != 2 ? _defaultColor : _defaultActiveColor,
              onPressed: () {
                setState(() {
                  _currentIndex = 2;
                });
              },
            ),
          ],
        ));
  }
}
